//页面中所有的数据
var data = [
  {
    id: 1,
    fileNum: 012022000001,
    receiptNum: 20220704003,
    boxNum: " 1 - 1 - 1 - 001",
  },
  {
    id: 2,
    fileNum: 012022000002,
    receiptNum: 20220704002,
    boxNum: "1 - 1 - 1 - 001",
  },
  {
    id: 3,
    fileNum: 012022000003,
    receiptNum: 20220704001,
    boxNum: "1 - 1 - 1 - 001",
  },
  {
    id: 4,
    fileNum: 012022000004,
    receiptNum: 20220703005,
    boxNum: " 1 - 1 - 1 - 001",
  },
  {
    id: 5,
    fileNum: 012022000005,
    receiptNum: 20220703004,
    boxNum: "1 - 1 - 1 - 001",
  },
  {
    id: 6,
    fileNum: 012022000006,
    receiptNum: 20220703003,
    boxNum: "1 - 1 - 1 - 001",
  },
  {
    id: 7,
    fileNum: 012022000007,
    receiptNum: 20220703002,
    boxNum: "1 - 1 - 1 - 002",
  },
  {
    id: 8,
    fileNum: 012022000407,
    receiptNum: 20220703001,
    boxNum: "1 - 1 - 1 - 003",
  },
  {
    id: 9,
    fileNum: 012022000004,
    receiptNum: 20220703001,
    boxNum: " 1 - 1 - 1 - 001",
  },
  {
    id: 10,
    fileNum: 012022000002,
    receiptNum: 20220703004,
    boxNum: "1 - 1 - 1 - 003",
  },
  {
    id: 11,
    fileNum: 012022000006,
    receiptNum: 20220703033,
    boxNum: "1 - 1 - 1 - 003",
  },
  {
    id: 12,
    fileNum: 012022000007,
    receiptNum: 2022023002,
    boxNum: "1 - 1 - 1 - 003",
  },
];
//当前页码
var page = 1;
//每页条数
var count = 8;
//获取tbody
var oTBody = document.querySelector("tbody");
//获取分页容器
var oPagination = document.querySelector(".pagination");
//获取上一页的按钮
var oPrevBtn = document.querySelector(".prev");
//获取下一页的按钮
var oNextBtn = document.querySelector(".next");

//获取搜索的输入框
var oSearchInp = document.querySelector(".searchInp");
//获取搜索按钮
var oSearchBtn = document.querySelector(".searchBtn");
//获取添加的保存按钮
var oAddSaveBtn = document.querySelector(".addSaveBtn");
//获取修改的保存
var oEditSaveBtn = document.querySelector(".editSaveBtn");
//给修改按钮
var oEditBtn = document.querySelector(".editBtn");
//获取删除按钮
var oDelBtn = document.querySelector(".delBtn");
//获取总数
var oTotal = document.querySelector("#total");

//页面初始化数据渲染功能
function render() {
  //查看搜索的内容
  var str = oSearchInp.value; //搜索的内容
  var searchData = []; //搜索后的数据
  if (str.trim() == "") {
    //没有搜索，全都要
    searchData = data;
  } else {
    for (var i = 0; i < data.length; i++) {
      //如果数据满足搜索条件内容
      if (data[i].boxNum.includes(str)) {
        searchData.push(data[i]);
      }
    }
  }
  //让table为空
  oTBody.innerHTML = "";
  //根据count和page准备要渲染的数据
  var renderArr = searchData.slice((page - 1) * count, page * count);
  //循环要渲染的数据
  for (var i = 0; i < renderArr.length; i++) {
    //创建tr
    var oTr = document.createElement("tr");
    //给tr创建内容
    oTr.innerHTML = `
      <td class="col-md-1"><input class="c2" type="checkbox" /></td>
        <td  class="col-md-2">${renderArr[i].id}</td>
        <td  class="col-md-2">${renderArr[i].fileNum}</td>
        <td  class="col-md-3">${renderArr[i].receiptNum}</td>
        <td  class="col-md-4">${renderArr[i].boxNum}</td>
    `;
    //把tr创建到tbody里面
    oTBody.appendChild(oTr);
    oTotal.innerText = data.length;
  }
  //渲染页码
  //找到页码按钮
  var aPageBtn = document.querySelectorAll(".pageBtn");
  //删除所有页码
  for (var i = 0; i < aPageBtn.length; i++) {
    oPagination.removeChild(aPageBtn[i].parentNode);
  }
  //再根据长度重新创建页码
  for (var i = 1; i <= Math.ceil(searchData.length / count); i++) {
    //创建li
    var oLi = document.createElement("li");
    //给li创建内容
    oLi.innerHTML = `<a class="pageBtn" href="#">${i}</a>`;
    //如果li和当前页码一致，给他加一个选中的class
    if (i == page) {
      oLi.classList.add("active");
    } //在下一页的当前页码
    oPagination.insertBefore(oLi, oPagination.lastElementChild);
  }
} //一上来就渲染一次数据
render();

//给分页加事件
oPagination.addEventListener("click", changePage);
function changePage() {
  //如果当前点击的按钮有pageBtn这个class名字
  if (event.target.className == "pageBtn") {
    //修改全部page
    page = event.target.innerText;
    //渲染table，渲染分页
    render();
  }
}
//给上一页和下一页加事件
oPrevBtn.addEventListener("click", prev);
oNextBtn.addEventListener("click", next);
function prev() {
  if (page > 1) {
    page--;
    render();
  }
}
function next() {
  if (page < Math.ceil(data.length / count)) {
    page++;
    render();
  }
}

// //全选
// var n = 0;
// var oC = document.getElementById("c1");
// oTBody.addEventListener("click", choose);
// function choose() {
//   var aInp = document.querySelectorAll(".c2");
//   oC.onclick = function () {
//     if (this.checked == true) {
//       for (var i = 0; i < aInp.length; i++) {
//         aInp[i].checked = true;
//       }
//       n = aInp.length;
//     } else {
//       for (var i = 0; i < aInp.length; i++) {
//         aInp[i].checked = false;
//       }
//       n = 0;
//     }
//   };
// }
// var aInp = document.querySelectorAll(".c2");
// //给下面的所有input都加上点击事件
// for (var i = 0; i < aInp.length; i++) {
//   aInp[i].onclick = function () {
//     if (this.checked == true) {
//       n++;
//     } else {
//       n--;
//     }
//     if (n == aInp.length) {
//       oC.checked = true;
//     } else {
//       oC.checked = false;
//     }
//   };
// }
// render();

//联动全选
//全选部分
var n = 0;
var oC = document.querySelector("#c1");
oC.addEventListener("click", chooseAll);
function chooseAll() {
  var aInp = oTBody.querySelectorAll(".c2");
  console.log(aInp);
  //   alert(1);
  if (oC.checked == true) {
    for (var i = 0; i < aInp.length; i++) {
      aInp[i].checked = true;
      console.log(aInp[i].checked);
    }
  } else {
    for (var i = 0; i < aInp.length; i++) {
      aInp[i].checked = false;
    }
    n = 0;
  }
}
//联动全选部分判断
var aInp = oTBody.querySelectorAll(".c2");
console.log(aInp);
//给所有c2加点击事件
for (var i = 0; i < aInp.length; i++) {
  aInp[i].onclick = function () {
    if (this.checked == true) {
      n++;
    } else {
      n--;
    }
    console.log(n);

    if (n == aInp.length) {
      oC.checked = true;
    } else {
      oC.checked = false;
    }
  };
}

//删除功能
oDelBtn.addEventListener("click", del);
function del() {
  var aInp = document.querySelectorAll(".c2");
  // console.log(this.checked);

  console.log(aInp);

  for (var i = 0; i < aInp.length; i++) {
    console.log(aInp[i]);
    console.log(aInp[i].checked);
    if (aInp[i].checked) {
      //找到id
      var id = aInp[i].parentNode.nextElementSibling.innerText;
      console.log(aInp[i]);
      //循环数据对比
      for (var j = 0; j < data.length; j++) {
        if (data[j].id == id) {
          //删除id所对应的数据
          data.splice(j, 1);
        }
      }
    }
  } //重新渲染
  render();
}

//搜索
oSearchBtn.addEventListener("click", searchFn);
function searchFn() {
  page = 1;
  render();
}

//添加
oAddSaveBtn.addEventListener("click", addFn);
function addFn() {
  var addId = document.querySelector(".addId");
  var addFileNum = document.querySelector(".addFileNum");
  var addReceiptNum = document.querySelector(".addReceiptNum");
  var addBoxNum = document.querySelector(".addBoxNum");

  data.push({
    id: addId.value,
    fileNum: addFileNum.value,
    receiptNum: addReceiptNum.value,
    boxNum: addBoxNum.value,
  });
  addId.value = "";
  addFileNum.value = "";
  addReceiptNum.value = "";
  addBoxNum.value = "";
  render();
  console.log(addId);

  // 让模态框隐藏;
  $("#myModal").modal("hide");
}

//给修改按钮加事件
oEditBtn.addEventListener("click", openEdit);
function openEdit() {
  //判断事源
  var aInp = document.querySelectorAll(".c2");
  console.log(aInp);
  for (var i = 0; i < aInp.length; i++) {
    if (aInp[i].checked) {
      //找到id
      //让编辑框显示
      // $("#editModal").modal("show");
      var id = aInp[i].parentNode.nextElementSibling.innerText;
      console.log(aInp[i]);
      //循环数据对比
      for (var i = 0; i < data.length; i++) {
        if (data[i].id == id) {
          //确认是那个id的数据
          // var id = aInp[i].parentNode.nextElementSibling.innerText;
          for (var i = 0; i < data.length; i++) {
            if (data[i].id == id) {
              document.querySelector(".editId").value = data[i].id;
              document.querySelector(".editFileNum").value = data[i].fileNum;
              document.querySelector(".editReceiptNum").value =
                data[i].receiptNum;
              document.querySelector(".editBoxNum").value = data[i].boxNum;
            }
          }
        }
      }
    }
  } //重新渲染
  render();
}

//修改保存
oEditSaveBtn.addEventListener("click", editFn);
function editFn() {
  //替换那个
  var id = document.querySelector(".editId").value;
  //循环数据，找到对应的，更改
  for (var i = 0; i < data.length; i++) {
    if (data[i].id == id) {
      data[i].id = document.querySelector(".editId").value;
      data[i].fileNum = document.querySelector(".editFileNum").value;
      data[i].receiptNum = document.querySelector(".editReceiptNum").value;
      data[i].boxNum = document.querySelector(".editBoxNum").value;
    }
  }
  //关闭弹框
  $("#editModal").modal("hide");
  //重新渲染
  render();
}

//左侧导航栏

// 左侧导航
// 有子菜单的项（包括菜单项和子菜单列表）                        一级菜单有子菜单的li标签
let subMenus = document.querySelectorAll(".menus-submenu");
// 菜单项X                                                    一级菜单里的a标签
let subMenusItems = document.querySelectorAll(".menus-submenu > .menus-item");
// 子菜单列表                                                 二级菜单ul
let subMenusList = document.querySelectorAll(".menus-submenu > .menus-list");
// 没有子菜单的项                                              一级菜单没有子菜单的li标签
let noSubMenusItems = document.querySelectorAll(".menus-nosubmenu");
// 当前展开的菜单项索引
let expandedIndex = 0;
// 当前选择的 子菜单项 的 父菜单项 索引
let selectedParentIndex = 0;
// 当前选择的子菜单项索引
let selectedSubIndex = 0;
// 当前选择的 没有子菜单的项 的索引
let selectedNoIndex = -1;

function closeExpanded(index) {
  // 关闭展开
  subMenus[index].classList.remove("expanded-list");
}
function clearSelected() {
  // 清除选中项
  // 选中项有子菜单时
  if (-1 != selectedParentIndex) {
    subMenusList[selectedParentIndex]
      .getElementsByTagName("li")
      [selectedSubIndex].classList.remove("selected-items");
    subMenus[selectedParentIndex].classList.remove("selected-items");
  }
  // 选中项没有子菜单时
  else {
    noSubMenusItems[selectedNoIndex].classList.remove("selected-items");
  }
}

function initListeners() {
  // 点击响应：菜单项展开
  for (let index = 0; index < subMenusItems.length; index++) {
    subMenusItems[index].addEventListener("click", function (e) {
      // 当前点击的没有展开 并且 存在展开的, 关闭当前展开的
      if (index != expandedIndex && -1 != expandedIndex) {
        closeExpanded(expandedIndex);
      }

      // 判断点击的是否已经展开
      if (!subMenus[index].classList.toggle("expanded-list")) {
        // 点击的就是展开的，关闭展开
        expandedIndex = -1;
        // 选中的项 是否是当前点击的子项
        if (index == selectedParentIndex) {
          subMenus[index].classList.add("selected-items");
        }
      } else {
        // 点击的是其他
        expandedIndex = index;
        // 选中的项 是否是当前点击的子项
        if (index == selectedParentIndex) {
          subMenus[selectedParentIndex].classList.remove("selected-items");
        } else if (-1 != selectedParentIndex) {
          subMenus[selectedParentIndex].classList.add("selected-items");
        }
      }
    });
  }
  // 点击响应：子菜单项选中
  for (let index = 0; index < subMenusList.length; index++) {
    let subMenuLi = subMenusList[index].getElementsByTagName("li");
    for (let j = 0; j < subMenuLi.length; j++) {
      subMenuLi[j].addEventListener("click", function (e) {
        if (!subMenuLi[j].classList.contains("selected-items")) {
          // 清除选择
          clearSelected();

          subMenuLi[j].classList.add("selected-items");
          selectedParentIndex = index;
          selectedSubIndex = j;
        }
      });
    }
  }
  // 点击响应：无二级菜单的菜单项选中
  for (let index = 0; index < noSubMenusItems.length; index++) {
    noSubMenusItems[index].addEventListener("click", function (e) {
      if (!this.classList.contains("selected-items")) {
        // 清除选择
        clearSelected();
        // 如果有展开，关闭展开
        if (
          -1 != expandedIndex &&
          subMenus[expandedIndex].classList.contains("expanded-list")
        ) {
          closeExpanded(expandedIndex);
        }
        this.classList.add("selected-items");
        selectedNoIndex = index;
        selectedParentIndex = -1;
      }
    });
  }
}

initListeners();
